<script setup>
import {ref} from "vue"
import tips from "../../components/index/tips.vue";
import btnModule from "../../components/index/btnModule.vue"
import { httpRequest } from "../../utils/http";
const content = ref('为了视频内容推送的准确性，建议选择与视频内容相关的话题，数量不少于3条')
const topic = ref([])
const shopInfo = ref(uni.getStorageSync('shop')[uni.getStorageSync('index')])
const getTopic = async() => {
        if(!uni.getStorageSync('topic').length){
            const res = await httpRequest('/api/labelRad','POST',{shopCate2Id:shopInfo.value.shopCate2Obj.shopCate2Id})
                topic.value = res.data
                uni.setStorageSync('topic',topic.value)
        }else{
            topic.value = uni.getStorageSync('topic')
        }
}
getTopic()

const add = ref(null)
const addTopic = () =>{
    add.value.open('bottom')
}
const topicInt = ref('')
const addOk = () => {
    topic.value.push({
        labelName:topicInt.value
    })
    add.value.close()
    topicInt.value = ''
    uni.setStorageSync('topic',topic.value)
}
const isRefer = ref(false)
const refTopic = ref([])
const refer = async() => {
    isRefer.value = true
    const res = await httpRequest('/api/labelRad','POST',{shopCate2Id:shopInfo.value.shopCate2Obj.shopCate2Id})
    refTopic.value = res.data
}
const border = ref(-1)
const getInput = (i)=>{
    border.value = i
    topicInt.value = refTopic.value[i].labelName
}
const delTopic = (i) => {
    topic.value.splice(i,1)
    uni.setStorageSync('topic',topic.value)
}
const close = () => {
  add.value.close()
}
</script>

<template>
  <view class="page">
    <tips :message="'话题'" :content="content"></tips>
    <view class="kong" v-if="topic.length==0">
    <image class="img" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/state_empty.png" /> 
  </view>
  <view v-else class="betitle" v-for="item,index in topic" :key="item.id">
    <view class="circle">{{index+1}}</view>
    <view style="width: 486rpx;">{{ item.labelName }}</view>
    <image @click="delTopic(index)" style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_shanchu.png" mode="" />
  </view>
    <btnModule @customClick="addTopic" :message="'添加话题'" />
  </view>
  <uni-popup ref="add">
    <view class="popup">
      <view class="close">
				<image class="close-btn" @click="close" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png" mode="" />
				添加话题
        <text @click="addOk" class="addbtn" :class="!topicInt?'disable':''">确定添加</text>
			</view>
      <view style="height: 1072rpx;padding: 30rpx;box-sizing: border-box;">
        <textarea v-model="topicInt" class="textarea" placeholder-style="color:rgb(144,147,153)" placeholder="请输入话题"/>
        <view v-if="!isRefer" class="ignorant">不知道写什么?<text @click="refer" style="color: rgb(142,84,244);">参考AI话题</text></view>
        <view v-else class="refer">
            <view class="tip">
              <text>点击话题列表，自动写入输入框</text>
              <view @click="getTitleRed" class="change">
                <image style="width: 32rpx;height: 32rpx;" src="" mode="" />换一批
              </view>
            </view>
            <view>
              <view 
              @click="getInput(index)" 
              v-for="item,index in refTopic" 
              :key="index" 
              class="box-item"
              :class="border==index?'checked':''"
              >{{ item.labelName }}</view>
            </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
    .page{
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 30rpx;
        box-sizing: border-box;
        background-color: rgb(246,248,251);
        padding-bottom: 200rpx;
        overflow-y: scroll;
        .kong{
          display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        background-color: #fff;
        text-align: center;
        overflow: hidden;
        font-size: 24rpx;
        color: rgb(144,147,153);
      .img{
        width: 610rpx;
        height: 368rpx;
        margin-top: 132rpx;
        margin-bottom: 42rpx;
      }
    }

    .betitle{
      box-sizing: border-box;
      width: 690rpx;
      min-height: 142rpx;
      background-color: #fff;
      border-radius: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      font-size: 28rpx;
      color: rgb(69,70,74);
      margin-bottom: 24rpx;
      .circle{
        width: 48rpx;
        height: 48rpx;
        border-radius: 356rpx;
        background-color: rgb(197,163,255);
        text-align: center;
        line-height: 48rpx;
        color: #fff;
      }
    }
    }
    .popup{
    width: 100%;
    background-color: #fff;
    border-radius: 32rpx 32rpx 0 0;
    .kong{
          display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        background-color: #fff;
        text-align: center;
        overflow: hidden;
        font-size: 24rpx;
        color: rgb(144,147,153);
      .img{
        width: 610rpx;
        height: 368rpx;
        margin-top: 132rpx;
        margin-bottom: 42rpx;
      }
    }
    .close{
		width: 100%;
		height: 108rpx;
		text-align: center;
		line-height: 108rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: rgb(48,49,51);
		.close-btn{
			position: absolute;
			top: 30rpx;
			left: 30rpx;
			width: 48rpx;
			height: 48rpx;

		}
    .addbtn{
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
      color: rgb(142,84,244);
    }
	}
  .textarea{
    box-sizing: border-box;
    width: 690rpx;
    height: 330rpx;
    border: 2rpx solid rgb(220,223,230);
    padding: 30rpx;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
  }
  .ignorant{
    font-size: 28rpx;
    text-align: right;
    color: rgb(69,70,74);
  }
  .refer{
   
    .tip{
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;
      font-size: 24rpx;
      color: rgb(144,147,153);
      .change{
        color: rgb(142,84,244);
        font-size: 28rpx;
      }
    }
    .box-item{
      width: 690rpx;
      min-height: 142rpx;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      background-color: rgb(249,249,249);
      font-size: 28rpx;
      color: rgb(69,70,74);
      margin-bottom: 24rpx;
      border: 2rpx solid rgba(0,0,0,0);
    }
  }
  .checked{
    border: 2rpx solid rgb(142,84,244) !important;
  }
  .popup-content{
    box-sizing: border-box;
    padding: 0 30rpx;
    height: 905rpx;
    border-top: 2rpx solid rgb(220,223,230);
    border-bottom: 2rpx solid rgb(220,223,230);
    .title-item{
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 136rpx;
      border-radius: 16rpx;
      font-size: 28rpx;
      color: rgb(69,70,74);
      border-bottom: 2rpx solid rgb(220,223,230);
    }
  }
  .cus-middle{
      padding: 30rpx;
      box-sizing: border-box;
      height: 905rpx;
      .cus-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .cus-content{
          width: 618rpx;
          min-height: 214rpx;
          background-color: rgb(249,249,249);
          padding: 30rpx;
          box-sizing: border-box;
          border-radius: 16rpx;
          .cus-image{
            text-align: right;
            margin-top: 24rpx;
          }
        }
      }
    }
  .bottom-btn{
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 166rpx;
    padding: 10rpx 30rpx 0;
    .all{
      display: flex;
      align-items: center;
      height: 88rpx;
      font-size: 28rpx;
      color: rgb(144,147,153);
    }
    .verify{
      width: 552rpx;
      height: 86rpx;
      padding: 0;
      margin: 0;
      text-align: center;
      line-height: 86rpx;
      color: #fff;
      background-color: rgb(142,84,244);
      font-size: 32rpx;
      margin-left: 18rpx;
    }
  }
}
.disable{
  color: rgb(144,147,153) !important;
}
</style>
